<template>
  <div class="red">
    我也是最帅的
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive} from 'vue'

export default defineComponent({
  name: "About",
  setup () {
    let color = ref('red');
    let fonts = reactive({
      fontWeight: 'bold',
      fontSize: '30px'
    })

    return {
      color,
      fonts
    }
  }
})
</script>

<style lang="scss">
  .red{
    color: v-bind('color');
    font-weight: v-bind('fonts.fontWeight');
    font-size: v-bind('fonts.fontSize');
  }
</style>